<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    :fullscreen="true"
    :switchFullscreen="false"
    :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }"
    :footer="null"
    @cancel="visible = false"
    cancelText="关闭"
  >
   <template slot="closeIcon">
    <a-icon type="close-circle" />
   </template>
   <div class="container">
    <div class="title">
      质检示意
    </div>
    <div class="img-content">
       <a-row :gutter="15">
         <a-col :md="12" :lg="8" :xl="8" v-for="(item1,index) in qcRequirementImg" :key="index">
           <div class="img"><img :src="item1"  /></div>
           <div class="img-name">{{ item1?`有质检图片质检要求${index+1}`: `无质检图片的质检要求${index+1}` }} </div>
          </a-col>
       </a-row>
    </div>
   </div>
   <div class="container">
    <div class="title">
      产品图片
    </div>
    <div class="img-content">
       <a-row :gutter="15">
         <a-col :md="12" :lg="8" :xl="8" v-for="(item2,index) in productImg" :key="index">
          <div class="img"><img :src="item2"  /></div>
           <div class="img-name">{{index=== 0? '主图':''}}</div>
          </a-col>
       </a-row>
    </div>
   </div>
  </j-modal>
</template>
<script>
export default {
  data() {
    return {
        title:'',
        visible:false,
        width:'100%',
        disableSubmit:false,
        qcRequirementImg:[],   //质检示意图
        productImg:[],    //产品图片
    }
  },
  methods:{
    showPreview(record){
      this.visible = true
      this.qcRequirementImg = record.qcRequirementImg?record.qcRequirementImg.split(',') :[]
      const productSecondaryImg = record.productSecondaryImg?record.productSecondaryImg.split(',') :[]
      this.productImg = [ record.productMainImg, ...productSecondaryImg]
    }
  }
}
</script>
<style lang="less" scoped>
/deep/.ant-modal-content{
    background:rgba(0,0,0,.45);
    color: #fff;
}
/deep/.ant-modal-close{
    color: #fff; 
    top: 20px;
    right: 70px;
}
/deep/.ant-modal-close-x{
  font-size: 50px;
}
.container{
  .title{
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    margin-left: 5%;
  }
  .img-content{
    width: 80%;
    margin: auto;
    .img-name{
      text-align: center;
      margin-top: 10px;
      height: 30px;
    }
  }
}
@media (min-width: 1601px) {
  .img{
    width: 400px;
    height: 400px;
    border: 1px solid #fff;
    img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .img-name{
    width: 400px;
    text-align: center;
  }
}
@media (min-width: 1401px) and (max-width:1600px) {
  .img{
    width: 360px;
    height: 360px;
    border: 1px solid #fff;
    img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .img-name{
    width: 360px;
    text-align: center;
  }
}
@media (min-width: 1201px) and (max-width:1400px) {
  .img{
    width: 300px;
    height: 300px;
    border: 1px solid #fff;
    img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .img-name{
    width: 300px;
    text-align: center;
  }
}
@media (min-width: 992px) and (max-width:1200px) {
  .img{
    width: 250px;
    height: 250px;
    border: 1px solid #fff;
    img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .img-name{
    width: 250px;
    text-align: center;
  }
}
@media (max-width: 991px) {
  .img{
    width: 200px;
    height: 200px;
    border: 1px solid #fff;
    img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .img-name{
    width: 200px;
    text-align: center;
  }
}

</style>